<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-pie-chart"></i> 数据统计
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="schart-box">
            <div class="content-title">柱状图</div>
            <schart class="schart" ref="bar" canvasId="bar" :options="options1"></schart>
        </div>

        <div class="schart-box">
            <div class="content-title">折线图</div>
            <schart class="schart" ref="line" canvasId="line" :options="options2"></schart>
        </div>
        <div class="schart-box">
            <div class="content-title">饼状图</div>
            <schart class="schart" ref="pie" canvasId="pie" :options="options3"></schart>
        </div>
        <div class="schart-box">
            <div class="content-title">环形图</div>
            <schart class="schart" ref="ring" canvasId="ring" :options="options4"></schart>
        </div>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import { countDeptEdu } from '../../api/apis/deptment';
import { countEmp } from '../../api/apis/emp';
import { countEmpSex } from '../../api/apis/emp';

export default {
    name: 'statistics',
    components: {
        Schart
    },
    data() {
        return {
            options1: {
                type: 'bar',
                title: {
                    text: '各部门人员学历统计'
                },
                bgColor: '#fbfbfb',
                labels: [],
                datasets: [
                    {
                        label: '研究生',
                        fillColor: 'rgba(241, 49, 74, 0.5)',
                        data: []
                    },
                    {
                        label: '本科生',
                        data: []
                    },
                    {
                        label: '大专生',
                        data: []
                    },
                    {
                        label: '高中生及以下',
                        data: []
                    }
                ]
            },
            options2: {
                type: 'line',
                title: {
                    text: '最近几个月公司员工变动'
                },
                bgColor: '#fbfbfb',
                labels: [],
                datasets: [
                    {
                        label: '新入职',
                        data: []
                    },
                    {
                        label: '离职',
                        data: []
                    }
                ]
            },
            options3: {
                type: 'pie',
                title: {
                    text: '公司人员学历总结'
                },
                legend: {
                    position: 'left'
                },
                bgColor: '#fbfbfb',
                labels: ['研究生', '本科生', '大专生', '高中生以以下'],
                datasets: [
                    {
                        data: []
                    }
                ]
            },
            options4: {
                type: 'ring',
                title: {
                    text: '公司性别比例'
                },
                showValue: false,
                legend: {
                    position: 'bottom',
                    bottom: 40
                },
                bgColor: '#fbfbfb',
                labels: ['男', '女'],
                datasets: [
                    {
                        data: [500, 500]
                    }
                ]
            }
        };
    },

    created() {
        this.getOptions1Data();
        this.getOptions2Data();
        this.getOptions4Data();
    },

    methods: {
        //各部门人员学历统计
        getOptions1Data() {
            countDeptEdu().then((res) => {
                let list = res.list;
                // callback(res.list);
                let postgraduate = 0;
                let undergraduate = 0;
                let juniorCollege = 0;
                let highSchool = 0;

                for (let i = 0; i < list.length; i++) {
                    //options1
                    this.options1.labels[i] = list[i].deptName;
                    this.options1.datasets[0].data[i] = list[i].postgraduate;
                    this.options1.datasets[1].data[i] = list[i].undergraduate;
                    this.options1.datasets[2].data[i] = list[i].juniorCollege;
                    this.options1.datasets[3].data[i] = list[i].highSchool;

                    //options3
                    postgraduate = postgraduate + list[i].postgraduate; //公司的研究生数量
                    undergraduate = undergraduate + list[i].undergraduate; //公司的本科生数量
                    juniorCollege = juniorCollege + list[i].juniorCollege; //公司的大专生数量
                    highSchool = highSchool + list[i].highSchool; //公司的高中生及以下数量
                }

                console.log('options1');
                console.log(this.options1);

                //重新渲染数据，这很重要
                //柱状图重新渲染数据
                this.$refs.bar.renderChart();

                //options3
                this.options3.datasets[0].data[0] = postgraduate;
                this.options3.datasets[0].data[1] = undergraduate;
                this.options3.datasets[0].data[2] = juniorCollege;
                this.options3.datasets[0].data[3] = highSchool;

                console.log('options3');
                console.log(this.options3);

                //饼状图重新渲染数据
                this.$refs.pie.renderChart();
            });
        },

        //最近几个月公司员工变动统计
        getOptions2Data() {
            countEmp().then((res) => {
                let list = res.list;
                for (let i = 0; i < list.length; i++) {
                    this.options2.labels[i] = list[i].month;

                    this.options2.datasets[0].data[i] = list[i].newEmp;
                    this.options2.datasets[1].data[i] = list[i].dimisEmp;
                }

                console.log('options2');
                console.log(this.options2);

                //重新渲染折线图
                this.$refs.line.renderChart();
            });
        },

        //公司性别比例统计
        getOptions4Data() {
            countEmpSex().then((res) => {
                let list = res.list;
                this.options4.datasets[0].data[0] = list[0].male;
                this.options4.datasets[0].data[1] = list[0].female;

                console.log('options4');
                console.log(this.options4);

                //重新渲染环形图
                this.$refs.ring.renderChart();
            });
        }

    }
};
</script>

<style scoped>
.schart-box {
    display: inline-block;
    margin: 20px;
}
.schart {
    width: 600px;
    height: 400px;
}
.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
</style>